<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">

    <div>
      <h2>欢迎光临红浪漫洗浴中心</h2>
      <div>请选择一位美女为你服务</div>
    </div>
    
    <!-- button -->
    <div>
      <button v-for="(item, index) in data.girls" :key="index" @click="data.selectGirlFun(index)">{{index}}:{{item}}</button>
    </div>
    <div>你选择了【{{data.selectGirl}}】为你服务</div>

  </div>
</template>

<script lang="ts">
import { reactive, ref } from 'vue';
export default ({
  name: 'Home',
  setup () {
    const data = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    return {
      data
    }
  }
});
</script>
